<template>
	<view class="index-wrap">
		<view class="index-wxml">
			<index-header :swiperList="swiperList" @changeTab='changeTab' :changeColor="changeColor"></index-header>
			<user-server></user-server>
			<view>
				<van-tabs v-model="currentIndex">
					<van-tab title="正在热映">
						<scroll-view scroll-x>
							<view class="scroll-film">
								<view class="scroll-film-item" v-for="(item,index) in filmList">
									<image :src="item.Imageurl" @click="toDetail(item)"></image>
									<van-button color='#FB5868' round size='small'
										@click="buyFilm(item.FilmCode)">购票</van-button>
								</view>
							</view>
						</scroll-view>
					</van-tab>
					<van-tab title="即将上映">
						<scroll-view scroll-x>
							<view class="scroll-film">
								<view class="scroll-film-item" v-for="(item,index) in futureFilm">
									<image :src="item.Imageurl" @click="toDetail(item)"></image>
									<van-button color='#61AFEF' round size='small'
										@click="buyFilm(item.FilmCode)">预售</van-button>
								</view>
							</view>
						</scroll-view>
					</van-tab>
				</van-tabs>
			</view>


			<van-popup :show="showTips" round>
				<view class="tips">
					<image :src="tipImg" mode="widthFix"></image>
					<van-button color='#FB5868' round type="info" @click="showTips=false">我知道了</van-button>
				</view>
			</van-popup>
		</view>

	</view>
</template>

<script>
	import {
		getCardList,
		getCinemaConfig,
		queryFilms,
		queryNewSession
	} from '../../common/http/api.js';
	import FilmSwiper from '../../components/index/FilmSwiper.vue'
	import IndexHeader from '../../components/index/IndexHeader.vue'
	import FilmSession from '../../components/index/FilmSession.vue'
	import UserServer from '../../components/user/UserServer.vue'
	import moment from 'moment'
	export default {
		components: {
			FilmSwiper,
			IndexHeader,
			FilmSession,
			UserServer
		},
		data() {
			return {
				name: '',
				currentIndex: 0,
				showMask: true,
				cinemaInfo: {},
				swiperList: [],
				films: [],
				filmList: [],
				dateList: [],
				sessionList: [],
				showTips: false,
				tipImg: '',
				titleBarHeight: '',
				statusBarHeight: '',
				adList: [],
				showHot: true,
				futureFilm: [],
				futureFilmIndex: null,
				changeColor: false,
				slideToCode: ''
			}
		},
		methods: {
			toMember() {
				getCardList(uni.getStorageSync("openId")).then(res => {
					const {
						code,
						data
					} = res
					if (code === "000") {

						uni.navigateTo({
							url: "../cardList/cardList"
						})

					} else if (code === "001") {
						uni.navigateTo({
							url: "../openCard/openCardList"
						})
					}
				})
			},
			buyFilm(code) {
				uni.navigateTo({
					url: `./selectFilm?filmCode=${code}`
				})
			},
			getConfig() {
				getCinemaConfig().then(res => {
					const {
						data,
						code
					} = res;
					if (code == "SUCCESS") {
						this.cinemaInfo = data
						this.$store.commit("setCinemaConfig", data);
						for (let key in data) {
							if (key.includes('picture')) {
								this.swiperList.push(data[key])
							}
						}
						this.tipImg = data.homeImage
						this.adList = data.rollAds.split('|')

					}
				})
			},
			handleTipTime() {
				const time = parseInt(uni.getStorageSync('tipTime'));
				const currentTime = new Date().getTime()
				if (!time) {
					this.showTips = true;
					uni.setStorageSync('tipTime', currentTime)
					setTimeout(() => this.showTips = false, 10000)
				} else {
					const result = currentTime - time;
					if (result > 300000) {
						this.showTips = true;
						uni.setStorageSync('tipTime', currentTime)
						setTimeout(() => this.showTips = false, 10000)
					} else {
						this.showTips = false;
					}
				}
			},
			toDetail(info) {
				uni.navigateTo({
					url: "../../pages/filmInfo/filmInfo"
				})
				this.$store.commit('setFilmInfo', info)
			},
			getFilms() {
				queryFilms().then((res) => {
					const {
						data,
						resultCode,
						msg
					} = res
					if (resultCode === '000') {
						this.filmList = data.Films
						this.querySession()
						this.handleTipTime()
					} else {
						uni.hideLoading();
						uni.showToast({
							title: msg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			//获取排期
			querySession() {
				queryNewSession().then(res => {
					const {
						data,
						code,
						msg
					} = res
					if (code === "SUCCESS") {
						const list = []
						for (let key in data) {
							this.dateList.push(key)
							list.push(...data[key])
						}
						this.dateList.sort((a, b) => {
							return this.sessionSort(a) - this.sessionSort(b)
						})
						const currentTime = moment().diff()
						this.sessionList = list.filter(item => {
							const startTime = moment(item.NetSaleStopTime).diff()

							return item.NetSaleStopTime && currentTime < startTime
						})
						this.sortFilm(data[this.dateList[0]], this.dateList[0])
					}
				})
			},
			sessionSort(date) {
				const timeStamp = new Date(date).getTime()
				return timeStamp
			},
			sortFilm(list, date) {
				const _list = list.filter(item => {
					const startTime = new Date(item.NetSaleStopTime).getTime()
					const currentTime = new Date().getTime()
					return item.NetSaleStopTime && currentTime < startTime
				})
				//即将上映
				const futureFilm = []
				this.filmList.map(item => {
					const futureFilmIndex = futureFilm.findIndex(filmItem => item.PublishDate == filmItem.date)
					if (moment(item.PublishDate).diff() > moment().diff()) {
						futureFilm.push(item)
					}

					item.sessions = []
					item.allSessions = []
					this.sessionList.map(session => {
						if (item.FilmCode == session.FilmCode) item.allSessions.push(session)
					})
					_list.map(session => {
						if (item.FilmCode == session.FilmCode) item.sessions.push(session)
					})
				})
				this.futureFilm = futureFilm
				this.filmList.sort(function(a, b) {
					return b.sessions.length - a.sessions.length
				})
				const filmsList = this.filmList.filter(item => item.allSessions.length > 0)
				this.filmList = filmsList


			},
		},
		onLoad(options) {
			if (options.cinemaCode) {
				uni.setStorageSync('cinemaCode', options.cinemaCode)
				uni.setStorageSync('currentCityName', options.currentCity)
			}
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			this.getConfig();

			uni.$once('sysHeight', data => {
				this.titleBarHeight = data.titleBarHeight
				this.statusBarHeight = data.statusBarHeight
			})
			this.getFilms()
		},
		onShareAppMessage() {
			const cinemaCode = uni.getStorageSync('cinemaCode', cinema.cinemaCode)
			const currentCityName = uni.getStorageSync('cinemaCode', cinema.currentCityName)
			return {
				path: `/pages/index/index?cinemaCode=${cinemaCode}&currentCityName=${currentCityName}`
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 135) {
				this.changeColor = true
			} else {
				this.changeColor = false
			}
		}
	}
</script>

<style lang="scss">
	.coustom-navbar {
		display: flex;
		justify-content: center;
	}

	.future-films-box {
		position: absolute;
		z-index: 9;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		top: 160px;
	}

	.film-box {
		position: fixed;
		top: 300rpx;
	}

	.scroll-film {
		display: flex;
		padding: 20rpx;

		.scroll-film-item {
			margin-right: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 240rpx;
				height: 360rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.loading-mask {
		width: 100vw;
		height: 100vh;
		background-color: #f0f0f5;
		position: absolute;
		left: 0;
		top: 0;
	}

	.future-films {

		padding: 5rpx 40rpx 5rpx 40rpx;



		.film-info {
			display: flex;
			margin-bottom: 20rpx;

			.film-name {
				padding-top: 5rpx;
				font-size: 28rpx;
				margin-bottom: 15rpx;
			}

			.desc {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 5rpx;
			}
		}

		.open-date {
			padding: 20rpx 0;
			font-size: 26rpx;
		}

		.film-img {
			width: 150rpx;
			height: 210rpx;
			margin-right: 20rpx;
			border-radius: 15rpx;
		}
	}

	.active-film {
		background-color: #f0f0f5;
	}

	.open-card-tip {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		background-color: #f0f0f5;
		font-size: 28rpx;
		color: #DD524D;


		view {
			display: flex;
			align-items: center;
		}

		text {
			margin: 0 15rpx;
		}
	}

	.tips {
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 15rpx;
		padding-bottom: 20rpx;

		image {
			width: 75vw;
			margin-bottom: 20rpx;
		}

		.confirm {
			width: 300rpx;
			font-size: 32rpx;
			background-color: #FB5868;
		}
	}

	.scroll-ads {
		display: flex;
		padding: 10rpx 30rpx;
		background-color: #f0f0f5;
		color: #DD524D;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;

		.ads {
			height: 60rpx;
			width: 60vw;
			margin-left: 20rpx;
			display: flex;
			align-items: center;

			.ads-item {
				height: 60rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
			}
		}
	}
</style>